<template>
	<section>
		<!--Alert提示框-->
        <el-alert type="warning" class="alert-style" v-show="hasAlert" @close="fnAlertClose">{{alertMsg}}</el-alert>
		
		<!--工具条-->
		<el-col :span="24" class="toolbar" style="padding-bottom:0px;height: 56px;">
			<el-form :inline="true" :model="filters">
				<el-form-item>
					<el-input v-model="filters.companyName" placeholder="公司名称"></el-input>
				</el-form-item>
				<el-form-item>
					<el-select v-model="filters.status" placeholder="请选择">
						<el-option v-for="item in status" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="fnGetApplys">查询</el-button>
				</el-form-item>
			</el-form>
		</el-col>
		
		<!--列表-->
		<el-table :data="applys" border style="width: 100%" v-loading="applysLoading" element-loading-text="拼命加载中">
			<el-table-column fixed prop="CompanyName" label="公司名称" width="200">
			</el-table-column>
			<el-table-column prop="ManufName" label="工艺分类" width="150">
			</el-table-column>
			<el-table-column prop="ContactPerson" label="申请人" width="120">
			</el-table-column>
			<el-table-column prop="Title" label="职务" width="120">
			</el-table-column>
			<el-table-column prop="Mobile" label="联系电话" width="130">
			</el-table-column>
			<el-table-column prop="CreatedTime" label="申请时间" :formatter="fnDateFormat" width="180">
			</el-table-column>
			<el-table-column prop="Status" label="状态" width="100">
			</el-table-column>
			<el-table-column prop="ApprovedComment" label="审核内容" :formatter="fnNullFormat" width="400">
			</el-table-column>
			<el-table-column prop="Approvedby" label="审核人" :formatter="fnNullFormat" width="120">
			</el-table-column>
			<el-table-column prop="ApprovedTime" label="审核时间" :formatter="fnDateFormat" width="180">
			</el-table-column>
			<el-table-column fixed="right" label="操作" width="65">
				<template scope="scope">
				    <el-tooltip class="item" effect="dark" content="审核" placement="bottom" v-show="scope.row.Status == '待审核'">
				      	<el-button type="info" size="mini" icon="custom-apply" @click="fnApply(scope.row.ID)"></el-button>
				    </el-tooltip>
				</template>
			</el-table-column>
		</el-table>
		
		<!--工具条-->
		<el-col :span="24" class="toolbar">
			<el-pagination layout="total, prev, pager, next" @current-change="fnPaginationChange" :page-size="size" :total="total" style="float:right;">
			</el-pagination>
		</el-col>
		
		<!--审核界面-->
		<el-dialog title="审核界面" v-model="applyFormVisible" :close-on-click-modal="false">
			<el-form :model="applyForm" label-width="80px" :rules="applyFormRules" ref="applyForm">
				<el-form-item label="审核意见" prop="approvedComment">
					<el-input type="textarea" :rows="4" placeholder="请输入审核意见" v-model="applyForm.approvedComment"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="applyFormVisible = false">取消</el-button>
				<el-button type="primary" @click.native="fnApplyPass(true)">通过</el-button>
				<el-button type="danger" @click.native="fnApplyPass(false)">驳回</el-button>
			</div>
		</el-dialog>
	</section>
</template>

<script>
    import Svc from '../../service/index.js'
	export default {
		data() {
			return {
				alertMsg:'',
				hasAlert:false,
				applysLoading:false,
				//所有状态
				status:[{
					label : '全部',
					value : 99
				},{
					label : '待审核',
					value : 1
				},{
					label : '审核通过',
					value : 2
				},{
					label : '驳回',
					value : 3
				}],
				filters: {
					companyName: '',
					status: 1
				},
				applys: [],
				total: 0,
				skip: 0,
				size: 20,
				applyFormVisible: false,//审核界面是否显示
				applyFormRules: {
					approvedComment: [
						{ required: true, message: '请输入审核意见！', trigger: 'blur' }
					]
				},
				//审核界面数据
				applyForm: {
					approvedComment:''
				},
				//当前审核对象ID
				currentID : 0
			}
		},
		methods: {
			//时间格式化  
            fnDateFormat:function(row, column) {
            	var moment = require('moment');
                var date = row[column.property];  
	          	if (date == '0001-01-01T00:00:00Z') {  
	             	return "----";  
	          	}  
	          	return moment(date).format("YYYY-MM-DD HH:mm:ss");  
            },
            //获取的值为空时显示"----"
            fnNullFormat:function(row, column) {
                var date = row[column.property];  
	          	if (date == '') {  
	             	return "----";  
	          	}  
	          	return date;  
            },
            //关闭alert
            fnAlertClose : function(){
            	this.hasAlert = false
            },
        	//显示message提示框
            openMessage : function(msg,type){
    	        this.$message({
		          	showClose: true,
		          	message: msg,
		          	type: type
		        });
            },
            //获取审核列表
			fnGetApplys : function() {
				var that = this
				that.applysLoading = true
				var params = {
				    CompanyName: that.filters.companyName,
				    Status: parseInt(that.filters.status),
				    Skip: that.skip*that.size,
					Size: that.size
				}
	            Svc.fnPostData('/api/manuf/joinapply',params,function(res){
	            	if (res.body.ErrCode == 0){
	            		that.applys = res.body.Data.List
	            		//只有更改查询条件的时候才返回总条数
	            		if (that.skip == 0) {
	            			that.total = res.body.Data.Total
	            		}
	            		that.applysLoading = false
	            	} else {
	            		that.alertMsg = "审核列表获取失败！"
	            		that.hasAlert = true
	            	}
	            },function(res){
	            	that.alertMsg = "网络错误，请重新！"
	            	that.hasAlert = true
	            })
			},
			//显示审核页面
			fnApply : function(id){
				var that = this
				that.applyFormVisible = true
				that.currentID = id
			},
			//审核通过/驳回
			fnApplyPass : function(isPass){
		   		var that = this
		   		var tipMsg = '您确认要通过该申请吗?'
		   		if (!isPass) {
		   			tipMsg = '您确认要驳回该申请吗?'
		   		}
		   		
		   		var params = {
	   			    ID: that.currentID,
				  	ApprovedComment: that.applyForm.approvedComment,
				    IsPass: isPass
		   		}
		   		
				that.$confirm(tipMsg, '提示', {
					type: 'warning'
				}).then(function(){
					Svc.fnPostData('/api/manuf/approve',params,function(res){
						if (res.body.ErrCode == 0) {
							that.applyFormVisible = false
							that.openMessage('审核操作成功！','success')
							setTimeout(function () {
			         			//刷新当前组件
	            				that.$router.go(0)
				          	},1500);
						} else {
							that.openMessage(res.body.ErrMsg,'error')
						}
					})
				})
			},
			//分页
			fnPaginationChange : function(val) {
				this.skip = val-1;
				this.fnGetApplys();
			}
		},
		mounted() {
			//获取审核列表
			this.fnGetApplys()
		}
	}

</script>

<style scoped>
	.m-t-10{
		margin-top: 10px;
	}

	.toolbar {
	    background: #f2f2f2;
	    padding: 10px 10px 0 10px;
	    margin: 10px 0;
	}
	
	.alert-style{
	    font-size: 15px;
    	margin-top: 10px;
	}
</style>